<template>
  <div>
    <el-menu
        background-color="rgb(48, 65, 86)"
        text-color="#fff"
        default-active="1"
        router
    >
      <el-menu-item index="1" class="el-hover" route="/">
        <i class="el-icon-s-home"></i>
        <template #title>首页</template>
      </el-menu-item>
      <el-submenu index="2">
        <template #title>
          <i class="el-icon-setting"></i>
          <span>系统管理</span>
        </template>
        <el-menu-item index="2-1" class="el-hover" route="/system/user">

          <i class="el-icon-user-solid"></i>
          用户管理

        </el-menu-item>
        <el-menu-item index="2-2" class="el-hover" route="/system/role">
          <i class="el-icon-rank"></i>
          角色管理
        </el-menu-item>
        <el-menu-item index="2-3" class="el-hover" route="/system/menu">
          <i class="el-icon-s-grid"></i>
          菜单管理
        </el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template #title>
          <i class="el-icon-s-opportunity"></i>
          <span>报警管理</span>
        </template>
        <el-menu-item index="3-1" class="el-hover" route="/police/real">

          <i class="el-icon-user-solid"></i>
          实时报警

        </el-menu-item>
        <el-menu-item index="3-2" class="el-hover" route="/police/historys">
          <i class="el-icon-rank"></i>
          历史报警
        </el-menu-item>

      </el-submenu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: "index",
  setup() {

    const isCollapse = ref(false)
    return {
      isCollapse
    }
  }

})
</script>

<style>
.el-hover:hover {
  background-color: rgb(24, 144, 255) !important;
}

.is-active {
  background-color: rgb(24, 144, 255) !important;
  color: #E9EEF3 !important;
}

.el-submenu__title {
  color: rgba(255, 255, 255, 0.95) !important;
  background-color: rgb(48, 65, 86) !important;
}

.i {
  color: #E9EEF3;
}

</style>